{% extends "base.html" %}

{% block title %}删除学员确认 - 乒乓球培训管理系统{% endblock %}
{% block page_title %}删除学员确认{% endblock %}

{% block extra_css %}
<style>
    .danger-zone {
        background: linear-gradient(135deg, #f8d7da, #f5c2c7);
        border: 2px solid #dc3545;
        border-radius: 15px;
        padding: 2rem;
        margin-bottom: 2rem;
    }

    .warning-card {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 10px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .student-info {
        background: white;
        border-radius: 10px;
        padding: 1.5rem;
        margin-bottom: 2rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .association-item {
        background: #f8f9fa;
        border-left: 4px solid #6c757d;
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 0 8px 8px 0;
    }

    .association-item.warning {
        border-left-color: #ffc107;
        background: #fff3cd;
    }

    .association-item.danger {
        border-left-color: #dc3545;
        background: #f8d7da;
    }

    .action-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn-delete {
        background: linear-gradient(135deg, #dc3545, #c82333);
        border: none;
        color: white;
        padding: 0.75rem 2rem;
        border-radius: 10px;
        font-weight: bold;
        transition: all 0.3s ease;
    }

    .btn-delete:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
        color: white;
    }

    .btn-cancel {
        background: linear-gradient(135deg, #6c757d, #5a6268);
        border: none;
        color: white;
        padding: 0.75rem 2rem;
        border-radius: 10px;
        font-weight: bold;
        transition: all 0.3s ease;
    }

    .btn-cancel:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
        color: white;
    }

    .confirmation-checkbox {
        margin: 1.5rem 0;
        padding: 1rem;
        background: rgba(220, 53, 69, 0.1);
        border-radius: 8px;
        border: 1px solid #dc3545;
    }

    @media (max-width: 768px) {
        .action-buttons {
            flex-direction: column;
        }

        .btn-delete, .btn-cancel {
            width: 100%;
            margin-bottom: 0.5rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <!-- 导航 -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url_for('dashboard.index') }}">管理首页</a></li>
            <li class="breadcrumb-item"><a href="{{ url_for('students.list') }}">学员管理</a></li>
            <li class="breadcrumb-item"><a href="{{ url_for('students.detail', id=student.id) }}">{{ student.real_name }}</a></li>
            <li class="breadcrumb-item active">删除确认</li>
        </ol>
    </nav>

    <!-- 危险操作警告 -->
    <div class="danger-zone text-center">
        <i class="fas fa-exclamation-triangle fa-3x text-danger mb-3"></i>
        <h2 class="text-danger">危险操作警告</h2>
        <p class="lead">您正在删除学员账户，此操作<strong>不可撤销</strong>！</p>
        <p class="text-muted">删除后学员将被设为非活跃状态，无法登录系统</p>
    </div>

    <div class="row">
        <div class="col-lg-8 mx-auto">
            <!-- 学员信息 -->
            <div class="student-info">
                <h4 class="mb-3">
                    <i class="fas fa-user me-2"></i>即将删除的学员信息
                </h4>

                <div class="row">
                    <div class="col-md-6">
                        <p><strong>姓名：</strong>{{ student.real_name }}</p>
                        <p><strong>用户名：</strong>{{ student.username }}</p>
                        <p><strong>手机号：</strong>{{ student.phone }}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>邮箱：</strong>{{ student.email or '未设置' }}</p>
                        <p><strong>所属校区：</strong>{{ student.campus.name if student.campus else '未分配' }}</p>
                        <p><strong>注册时间：</strong>{{ student.created_at.strftime('%Y-%m-%d %H:%M') }}</p>
                    </div>
                </div>
            </div>

            <!-- 关联数据检查 -->
            {% if associations.total_coach_relations_count > 0 or associations.total_reservations_count > 0 or associations.account_balance > 0 %}
            <div class="warning-card">
                <h5 class="text-warning mb-3">
                    <i class="fas fa-link me-2"></i>检测到关联数据
                </h5>
                <p class="mb-3">删除此学员将同时影响以下相关数据：</p>

                {% if associations.active_coaches_count > 0 %}
                <div class="association-item warning">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <strong>活跃教练关系</strong>
                            <small class="text-muted d-block">当前活跃的师生关系</small>
                        </div>
                        <span class="badge bg-warning">
                            {{ associations.active_coaches_count }} 个教练
                        </span>
                    </div>
                </div>
                {% endif %}

                {% if associations.future_reservations_count > 0 %}
                <div class="association-item danger">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <strong>未来预约</strong>
                            <small class="text-muted d-block">尚未完成的课程预约</small>
                        </div>
                        <span class="badge bg-danger">
                            {{ associations.future_reservations_count }} 个预约
                        </span>
                    </div>
                </div>
                {% endif %}

                {% if associations.total_reservations_count > 0 %}
                <div class="association-item warning">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <strong>历史预约记录</strong>
                            <small class="text-muted d-block">所有预约记录（包括已完成）</small>
                        </div>
                        <span class="badge bg-warning">
                            {{ associations.total_reservations_count }} 条记录
                        </span>
                    </div>
                </div>
                {% endif %}

                {% if associations.account_balance > 0 %}
                <div class="association-item danger">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <strong>账户余额</strong>
                            <small class="text-muted d-block">学员账户中的剩余金额</small>
                        </div>
                        <span class="badge bg-danger">
                            ¥{{ "%.2f"|format(associations.account_balance) }}
                        </span>
                    </div>
                </div>
                {% endif %}

                {% if associations.total_coach_relations_count > 0 %}
                <div class="association-item warning">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <strong>师生关系记录</strong>
                            <small class="text-muted d-block">所有师生关系申请记录</small>
                        </div>
                        <span class="badge bg-warning">
                            {{ associations.total_coach_relations_count }} 条记录
                        </span>
                    </div>
                </div>
                {% endif %}
            </div>
            {% endif %}

            <!-- 删除确认表单 -->
            <form method="POST" id="deleteForm">
                {{ form.hidden_tag() }}
                {{ form.student_id() }}

                <div class="confirmation-checkbox">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="confirmDelete" required>
                        <label class="form-check-label fw-bold text-danger" for="confirmDelete">
                            我确认要删除学员"{{ student.real_name }}"，并且理解此操作不可撤销
                        </label>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="confirmText" class="form-label">确认删除 <span class="text-danger">*</span></label>
                    {{ form.confirm_text(class="form-control", id="confirmText", placeholder="请输入：确认删除") }}
                    <small class="form-text text-muted">请输入"确认删除"四个字以确认操作</small>
                </div>

                <div class="action-buttons">
                    <button type="submit" class="btn btn-delete" id="deleteButton" disabled>
                        <i class="fas fa-trash me-2"></i>确认删除
                    </button>
                    <a href="{{ url_for('students.detail', id=student.id) }}" class="btn btn-cancel">
                        <i class="fas fa-times me-2"></i>取消操作
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 确认复选框和文本输入控制删除按钮
    function updateDeleteButton() {
        const deleteButton = $('#deleteButton');
        const confirmChecked = $('#confirmDelete').is(':checked');
        const confirmText = $('#confirmText').val().trim();

        if (confirmChecked && confirmText === '确认删除') {
            deleteButton.prop('disabled', false);
        } else {
            deleteButton.prop('disabled', true);
        }
    }

    // 绑定事件监听器
    $('#confirmDelete').change(updateDeleteButton);
    $('#confirmText').on('input', updateDeleteButton);

    // 表单提交二次确认
    $('#deleteForm').submit(function(e) {
        e.preventDefault();

        const studentName = '{{ student.real_name }}';
        const confirmText = $('#confirmText').val().trim();

        if (confirmText !== '确认删除') {
            alert('请输入"确认删除"四个字以确认操作');
            return;
        }

        if (confirm(`最后确认：您真的要删除学员"${studentName}"吗？\n\n此操作将永久删除该学员的所有数据，无法恢复！`)) {
            // 显示加载状态
            const deleteButton = $('#deleteButton');
            deleteButton.html('<i class="fas fa-spinner fa-spin me-2"></i>删除中...').prop('disabled', true);

            // 提交表单
            this.submit();
        }
    });

    // 页面加载动画
    $('.danger-zone, .student-info, .warning-card').hide().fadeIn(600);
});

// 防止意外关闭页面
window.addEventListener('beforeunload', function(e) {
    const confirmDelete = document.getElementById('confirmDelete');
    const confirmText = document.getElementById('confirmText');
    if ((confirmDelete && confirmDelete.checked) || (confirmText && confirmText.value.trim().length > 0)) {
        e.preventDefault();
        e.returnValue = '您正在进行危险操作，确定要离开此页面吗？';
    }
});
</script>
{% endblock %}